<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到拴马桩</title>
    <link rel="stylesheet" type="text/css" href="login/style.css">
	 <link rel="shortcut icon" href="Imperial/assets/img/logo.php">
    <link rel="stylesheet" th:href="@{/webjars/layui/2.5.7/css/layui.css}">
    <script th:src="@{/webjars/layui/2.5.7/layui.js}"></script>
    <script th:src="@{/webjars/jquery/3.6.0/dist/jquery.js}"></script>
</head>

<body>
<div class="container right-panel-active">
<div class="container__form container--signup">
    <form action="/toregister" class="form" id="form2" method="post">
        <div>
       <div><h2 class="form__title"><b>注册账号</b></h2></div>
        <div><h3 th:text="${msg1}" style="color: red"></h3></div>
        <div><input type="text" placeholder="用户名" name="username" class="input" required/></div>
        <div><input type="email" placeholder="邮箱" name="email" class="input" id="email" required/></div>
        <div style="float: left">
            <input style="width: 144px" type="text" placeholder="邮箱验证码" name="Verification" class="input"/>
            <span onclick="sendVerification()" class="layui-btn">发送验证码</span>
        </div>
        <div><input type="text" placeholder="手机号" name="phone_number" class="input" required/></div>
        <div><input type="password" placeholder="密码" name="password" class="input" required/></div>
        <div><button class="btn">点击注册</button></div>
        </div>
    </form>
</div>

       <!-- 登录 -->
<!--        <div class="container__form container&#45;&#45;signin">-->
<!--            <form action="/homePage" class="form" id="form1">-->
<!--                <h2 class="form__title">欢迎登录</h2>-->
<!--                <input type="email" placeholder="邮箱" class="input" name="email"/>-->
<!--                <input type="password" placeholder="密码" class="input" name="password" />-->
<!--                <a href="../static/login/forget.html" class="link">忘记密码?</a>-->
<!--                <button class="btn">登录</button>-->
<!--            </form>-->
<!--        </div>-->
		 <!-- 注册 -->

        <!-- 叠加部分 -->
        <div class="container__overlay">
            <div class="overlay">
                <div class="overlay__panel overlay--left">
                    <a class="btn"  th:href="@{/tologin}">已有账号，直接登录</a>
                </div>
                <div class="overlay__panel overlay--right">
                    <a class="btn"  th:href="@{/register}">没有账号，点击注册</a>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="login/script.js"></script>
</html>
<script>
    function sendVerification() {
        let email=$('#email').val();
        if (email==null||email==""){
            layui.use('layer',function () {
                layer.msg("邮箱不能为空");
            })
            return ;
        }
        let that =this;
        let flagTime=new Date();
        if(flagTime.getTime()-that.time<180000&&that.time!==0){
            alert("请3分钟后再点击发送验证码");
            return;
        }
        $.post({
            url:'/email',
            data:{
              'email':email
            },
            success:function (res) {
                if (res=="1"){
                    layui.use('layer',function () {
                        let time=new Date();
                        that.time=time.getTime();
                        layer.msg("发送成功");
                    })
                }else{
                    layui.use('layer',function () {
                        layer.msg("发送失败");
                    })
                }
            }
        })
    }
</script>